<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>运输调度 - 雁农冷链平台</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<!-- 所需样式 -->
	<link rel="stylesheet" href="../../static/kj/element-ui/theme-chalk/index.css">
	<link rel="stylesheet" href="../../static/sa.css">
	<style>
		.dispatch-container {
			padding: 20px;
		}
		.dispatch-card {
			background: #fff;
			border-radius: 8px;
			box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
			margin-bottom: 20px;
			padding: 20px;
		}
		.status-running {
			color: #67c23a;
			font-weight: bold;
		}
		.status-waiting {
			color: #e6a23c;
			font-weight: bold;
		}
		.status-completed {
			color: #909399;
			font-weight: bold;
		}
		.vehicle-card {
			border: 1px solid #e4e7ed;
			border-radius: 6px;
			padding: 15px;
			margin-bottom: 15px;
			transition: all 0.3s;
		}
		.vehicle-card:hover {
			border-color: #409eff;
			box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
		}
		.route-map {
			height: 400px;
			border-radius: 8px;
			width: 100%;
			position: relative;
		}
		.map-controls {
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 1000;
			background: rgba(255,255,255,0.9);
			padding: 10px;
			border-radius: 6px;
			box-shadow: 0 2px 8px rgba(0,0,0,0.1);
		}
		.temp-monitor {
			background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
			color: white;
			padding: 15px;
			border-radius: 8px;
			text-align: center;
		}
	</style>
</head>
<body>
	<div id="app">
		<div class="dispatch-container">
			<h2 style="margin-bottom: 30px; color: #303133;">
				<i class="el-icon-coordinate"></i> 运输调度中心
			</h2>
			
			<!-- 调度概览 -->
			<div class="dispatch-card">
				<h3 style="margin-bottom: 20px; color: #409eff;">
					<i class="el-icon-data-analysis"></i> 调度概览
				</h3>
				<el-row :gutter="20">
					<el-col :span="6">
						<el-card class="box-card">
							<div style="text-align: center;">
								<div style="font-size: 32px; color: #67c23a; font-weight: bold;">{{overview.runningVehicles}}</div>
								<div style="color: #909399;">运行中车辆</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card class="box-card">
							<div style="text-align: center;">
								<div style="font-size: 32px; color: #e6a23c; font-weight: bold;">{{overview.waitingTasks}}</div>
								<div style="color: #909399;">待调度任务</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card class="box-card">
							<div style="text-align: center;">
								<div style="font-size: 32px; color: #409eff; font-weight: bold;">{{overview.totalRoutes}}</div>
								<div style="color: #909399;">今日路线</div>
							</div>
						</el-card>
					</el-col>
					<el-col :span="6">
						<el-card class="box-card">
							<div style="text-align: center;">
								<div style="font-size: 32px; color: #f56c6c; font-weight: bold;">{{overview.alerts}}</div>
								<div style="color: #909399;">异常告警</div>
							</div>
						</el-card>
					</el-col>
				</el-row>
			</div>
			
			<!-- 车辆调度 -->
			<div class="dispatch-card">
				<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
					<h3 style="margin: 0; color: #409eff;">
						<i class="el-icon-truck"></i> 车辆调度
					</h3>
					<el-button type="primary" size="small" @click="showDispatchDialog = true">
						<i class="el-icon-plus"></i> 新建调度
					</el-button>
				</div>
				
				<el-row :gutter="20">
					<el-col :span="12" v-for="vehicle in vehicles" :key="vehicle.id">
						<div class="vehicle-card">
							<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
								<h4 style="margin: 0;">{{vehicle.plateNumber}}</h4>
								<el-tag :type="getStatusType(vehicle.status)">{{vehicle.statusText}}</el-tag>
							</div>
							<div style="margin-bottom: 10px;">
								<span style="color: #909399;">司机：</span>{{vehicle.driver}}
								<span style="color: #909399; margin-left: 20px;">载重：</span>{{vehicle.capacity}}吨
							</div>
							<div style="margin-bottom: 10px;">
								<span style="color: #909399;">当前位置：</span>{{vehicle.location}}
							</div>
							<div v-if="vehicle.currentTask">
								<span style="color: #909399;">当前任务：</span>{{vehicle.currentTask}}
							</div>
							<div style="margin-top: 15px;">
								<el-button size="mini" @click="trackVehicle(vehicle)">实时跟踪</el-button>
								<el-button size="mini" type="primary" @click="assignTask(vehicle)">分配任务</el-button>
							</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 路线规划 -->
			<div class="dispatch-card">
				<h3 style="margin-bottom: 20px; color: #409eff;">
					<i class="el-icon-map-location"></i> 路线规划
				</h3>
				<el-row :gutter="20">
					<el-col :span="16">
						<div class="route-map">
						<div id="dispatchMap" style="width: 100%; height: 100%; border-radius: 8px;"></div>
						<div class="map-controls">
							<el-select v-model="selectedVehicle" placeholder="选择车辆" size="mini" style="width: 150px; margin-right: 10px;" @change="focusVehicle">
								<el-option label="全部车辆" value="all"></el-option>
								<el-option v-for="vehicle in vehicles" :key="vehicle.id" :label="vehicle.plateNumber" :value="vehicle.id"></el-option>
							</el-select>
							<el-button size="mini" @click="refreshMap">刷新</el-button>
						</div>
					</div>
					</el-col>
					<el-col :span="8">
						<div style="margin-bottom: 20px;">
							<h4>路线优化建议</h4>
							<el-timeline>
								<el-timeline-item timestamp="09:30" color="#0bbd87">
									避开拥堵路段，预计节省30分钟
								</el-timeline-item>
								<el-timeline-item timestamp="10:15" color="#e4e7ed">
									建议在服务区进行温度检查
								</el-timeline-item>
								<el-timeline-item timestamp="12:00" color="#f56c6c">
									前方天气预警，注意保温措施
								</el-timeline-item>
							</el-timeline>
						</div>
						<div class="temp-monitor">
							<div style="font-size: 18px; margin-bottom: 10px;">
								<i class="el-icon-thermometer"></i> 温度监控
							</div>
							<div>实时监控运输过程中的温度变化</div>
							<div style="margin-top: 10px; font-size: 14px; opacity: 0.9;">当前监控车辆：8辆</div>
						</div>
					</el-col>
				</el-row>
			</div>
			
			<!-- 待调度任务 -->
			<div class="dispatch-card">
				<h3 style="margin-bottom: 20px; color: #409eff;">
					<i class="el-icon-s-order"></i> 待调度任务
				</h3>
				<el-table :data="pendingTasks" style="width: 100%">
					<el-table-column prop="taskId" label="任务编号" width="120"></el-table-column>
					<el-table-column prop="goodsName" label="货物名称" width="150"></el-table-column>
					<el-table-column prop="origin" label="起点" width="150"></el-table-column>
					<el-table-column prop="destination" label="终点" width="150"></el-table-column>
					<el-table-column prop="urgency" label="紧急程度" width="100">
						<template slot-scope="scope">
							<el-tag :type="getUrgencyType(scope.row.urgency)">{{scope.row.urgency}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column prop="tempRequirement" label="温度要求" width="120"></el-table-column>
					<el-table-column label="操作" width="200">
						<template slot-scope="scope">
							<el-button size="mini" type="primary" @click="dispatchTask(scope.row)">立即调度</el-button>
							<el-button size="mini" @click="viewTaskDetail(scope.row)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		
		<!-- 新建调度对话框 -->
		<el-dialog title="新建调度任务" :visible.sync="showDispatchDialog" width="600px">
			<el-form :model="dispatchForm" label-width="100px">
				<el-form-item label="选择车辆">
					<el-select v-model="dispatchForm.vehicleId" placeholder="请选择车辆">
						<el-option v-for="vehicle in availableVehicles" :key="vehicle.id" :label="vehicle.plateNumber + ' - ' + vehicle.driver" :value="vehicle.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="选择任务">
					<el-select v-model="dispatchForm.taskId" placeholder="请选择任务">
						<el-option v-for="task in pendingTasks" :key="task.taskId" :label="task.taskId + ' - ' + task.goodsName" :value="task.taskId"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="预计出发">
					<el-date-picker v-model="dispatchForm.departureTime" type="datetime" placeholder="选择出发时间"></el-date-picker>
				</el-form-item>
				<el-form-item label="备注">
					<el-input v-model="dispatchForm.remarks" type="textarea" placeholder="请输入备注信息"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="showDispatchDialog = false">取消</el-button>
				<el-button type="primary" @click="confirmDispatch">确认调度</el-button>
			</div>
		</el-dialog>
	</div>
	
	<!-- 所需js -->
	<script src="https://webapi.amap.com/maps?v=1.4.15&key=f4b99739d9a04f7b9c8dca8eca6e1b3f&plugin=AMap.Driving"></script>
	<script src="../../static/kj/vue.min.js"></script>
	<script src="../../static/kj/element-ui/index.js"></script>
	<script src="../../static/sa.js"></script>
	<script>
		var app = new Vue({
			el: '#app',
			mounted() {
				this.initMap();
			},
			data: {
				map: null,
				vehicleMarkers: [],
				selectedVehicle: 'all',
				overview: {
					runningVehicles: 12,
					waitingTasks: 8,
					totalRoutes: 25,
					alerts: 2
				},
				vehicles: [
					{
						id: 1,
						plateNumber: '京A12345',
						driver: '张师傅',
						capacity: 8.5,
						status: 'running',
						statusText: '运行中',
						location: '北京市朝阳区',
						currentTask: 'WB1704567890123 - 生鲜蔬菜配送',
						lng: 116.4074,
						lat: 39.9042,
						route: [[116.3974, 39.9142], [116.4174, 39.8942]]
					},
					{
						id: 2,
						plateNumber: '京B67890',
						driver: '李师傅',
						capacity: 12.0,
						status: 'waiting',
						statusText: '待命',
						location: '北京市海淀区物流园',
						currentTask: null,
						lng: 116.2317,
						lat: 39.9761
					},
					{
						id: 3,
						plateNumber: '京C11111',
						driver: '王师傅',
						capacity: 6.0,
						status: 'completed',
						statusText: '已完成',
						location: '北京市丰台区',
						currentTask: null,
						lng: 116.2865,
						lat: 39.8583
					},
					{
						id: 4,
						plateNumber: '京D22222',
						driver: '赵师傅',
						capacity: 10.0,
						status: 'running',
						statusText: '运行中',
						location: '河北省廊坊市',
						currentTask: 'WB1704567890124 - 冷冻肉类运输',
						lng: 116.7038,
						lat: 39.5269,
						route: [[116.6938, 39.5369], [116.7138, 39.5169]]
					}
				],
				pendingTasks: [
					{
						taskId: 'T2024010801',
						goodsName: '新鲜水果',
						origin: '山东烟台',
						destination: '北京新发地',
						urgency: '紧急',
						tempRequirement: '2-8°C'
					},
					{
						taskId: 'T2024010802',
						goodsName: '冷冻海鲜',
						origin: '大连港',
						destination: '天津滨海新区',
						urgency: '普通',
						tempRequirement: '-18°C'
					},
					{
						taskId: 'T2024010803',
						goodsName: '乳制品',
						origin: '内蒙古呼和浩特',
						destination: '北京朝阳区',
						urgency: '加急',
						tempRequirement: '0-4°C'
					}
				],
				showDispatchDialog: false,
				dispatchForm: {
					vehicleId: '',
					taskId: '',
					departureTime: '',
					remarks: ''
				}
			},
			computed: {
				availableVehicles() {
					return this.vehicles.filter(v => v.status === 'waiting' || v.status === 'completed');
				}
			},
			methods: {
				getStatusType(status) {
					const typeMap = {
						'running': 'success',
						'waiting': 'warning',
						'completed': 'info'
					};
					return typeMap[status] || 'info';
				},
				getUrgencyType(urgency) {
					const typeMap = {
						'紧急': 'danger',
						'加急': 'warning',
						'普通': 'success'
					};
					return typeMap[urgency] || 'info';
				},
				trackVehicle(vehicle) {
					this.$message.success('正在跟踪车辆：' + vehicle.plateNumber);
					console.log('跟踪车辆：', vehicle);
				},
				assignTask(vehicle) {
					this.dispatchForm.vehicleId = vehicle.id;
					this.showDispatchDialog = true;
				},
				dispatchTask(task) {
					this.dispatchForm.taskId = task.taskId;
					this.showDispatchDialog = true;
				},
				viewTaskDetail(task) {
					this.$message.info('查看任务详情：' + task.taskId);
					console.log('任务详情：', task);
				},
				confirmDispatch() {
						if (!this.dispatchForm.vehicleId || !this.dispatchForm.taskId) {
							this.$message.warning('请选择车辆和任务');
							return;
						}
						
						this.$message.success('调度任务创建成功！');
						console.log('调度信息：', this.dispatchForm);
						
						// 重置表单
						this.dispatchForm = {
							vehicleId: '',
							taskId: '',
							departureTime: '',
							remarks: ''
						};
						this.showDispatchDialog = false;
					},
					initMap() {
						this.map = new AMap.Map('dispatchMap', {
							zoom: 11,
							center: [116.397428, 39.90923],
							mapStyle: 'amap://styles/whitesmoke'
						});
						
						// 添加控件
						AMap.plugin(['AMap.Scale', 'AMap.ToolBar'], () => {
							this.map.addControl(new AMap.Scale());
							this.map.addControl(new AMap.ToolBar());
						});
						
						// 添加车辆标记
						this.addVehicleMarkers();
					},
					addVehicleMarkers() {
						// 清除现有标记
						this.vehicleMarkers.forEach(marker => {
							this.map.remove(marker);
						});
						this.vehicleMarkers = [];
						
						this.vehicles.forEach(vehicle => {
							const iconColor = this.getVehicleIconColor(vehicle.status);
							
							const marker = new AMap.Marker({
								position: [vehicle.lng, vehicle.lat],
								icon: new AMap.Icon({
									size: new AMap.Size(32, 32),
									image: `data:image/svg+xml;base64,${btoa(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="${iconColor}"><path d="M18.92 6.01C18.72 5.42 18.16 5 17.5 5h-11c-.66 0-1.22.42-1.42 1.01L3 12v8c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-1h12v1c0 .55.45 1 1 1h1c.55 0 1-.45 1-1v-8l-2.08-5.99zM6.5 16c-.83 0-1.5-.67-1.5-1.5S5.67 13 6.5 13s1.5.67 1.5 1.5S7.33 16 6.5 16zm11 0c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zM5 11l1.5-4.5h11L19 11H5z"/></svg>`)}`
								}),
								title: `${vehicle.plateNumber} - ${vehicle.driver}`,
								offset: new AMap.Pixel(-16, -16)
							});
							
							// 添加信息窗体
							const infoWindow = new AMap.InfoWindow({
								content: `
									<div style="padding: 10px; min-width: 200px;">
										<h4 style="margin: 0 0 10px 0; color: #333;">${vehicle.plateNumber}</h4>
										<p style="margin: 5px 0; color: #666;"><strong>司机：</strong>${vehicle.driver}</p>
										<p style="margin: 5px 0; color: #666;"><strong>载重：</strong>${vehicle.capacity}吨</p>
										<p style="margin: 5px 0; color: #666;"><strong>状态：</strong><span style="color: ${iconColor}; font-weight: bold;">${vehicle.statusText}</span></p>
										<p style="margin: 5px 0; color: #666;"><strong>位置：</strong>${vehicle.location}</p>
										${vehicle.currentTask ? `<p style="margin: 5px 0; color: #666;"><strong>任务：</strong>${vehicle.currentTask}</p>` : ''}
									</div>
								`,
								offset: new AMap.Pixel(0, -30)
							});
							
							marker.on('click', () => {
								infoWindow.open(this.map, marker.getPosition());
							});
							
							this.map.add(marker);
							this.vehicleMarkers.push(marker);
							
							// 如果车辆有路线，绘制路线
							if (vehicle.route && vehicle.route.length > 0) {
								const polyline = new AMap.Polyline({
									path: vehicle.route,
									strokeColor: iconColor,
									strokeWeight: 4,
									strokeOpacity: 0.8,
									strokeDasharray: [10, 5]
								});
								this.map.add(polyline);
								this.vehicleMarkers.push(polyline);
							}
						});
					},
					getVehicleIconColor(status) {
						const colorMap = {
							'running': '#67c23a',
							'waiting': '#e6a23c',
							'completed': '#909399'
						};
						return colorMap[status] || '#409eff';
					},
					focusVehicle() {
						if (this.selectedVehicle === 'all') {
							// 显示所有车辆
							this.map.setFitView();
						} else {
							// 聚焦到选中车辆
							const vehicle = this.vehicles.find(v => v.id == this.selectedVehicle);
							if (vehicle) {
								this.map.setCenter([vehicle.lng, vehicle.lat]);
								this.map.setZoom(15);
							}
						}
					},
					refreshMap() {
						this.$message.info('正在刷新地图数据...');
						// 模拟数据更新
						setTimeout(() => {
							this.addVehicleMarkers();
							this.$message.success('地图数据已更新');
						}, 1000);
					}
			}
		});
	</script>
</body>
</html>